<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.axis path,
		.axis line{
			fill: none;
			stroke: black;
			shap-rendering: crispEdges;
		}
		#tooltip {
			position: absolute;
			width: 200px;
			height: auto;
			padding: 10px;
			background-color: white;
			border-radius: 10px;
			box-shadow: 4px 4px 10px rgba(0,0,0,.4);
			pointer-events: none;
		}
		.hidden{
			display: none;
		}

	</style>
	<script src="../js/d3.v3.js"></script>
</head>
<body>
<div id="tooltip" class="hidden">
	<p>
		值:<span id="value"></span>
	</p>
</div>
<script>
	var w = 500;
	var h = 200;
	var padding = 25;

	var dataset = [];
	for (var i = 0; i < 10; i++) {
		var newNumber = Math.random() * 30;
		dataset.push({
			number: newNumber,
			name: "柱子" + i
		});
	}



	var xScale = d3.scale.ordinal()
			.rangeRoundBands([padding, w - padding], 0.1)
			.domain(dataset.map(function (d) {
				return d.name;
			}))


	var yScale = d3.scale.linear()
			.rangeRound([padding, h - padding])
			.domain([
				d3.max(dataset, function(d){
					return d.number;
				}),
				0
			])


	svg = d3.select("body")
			.append("svg")
			.attr("width", w)
			.attr("height", h)

	svg.selectAll("rect")
			.data(dataset)
			.enter()
			.append("rect")
			.attr("x", function (d, i) {
				return xScale(d.name);
			})
			.attr("width", xScale.rangeBand())
			.attr("height", function (d) {
				return h- yScale(d.number) - padding;
			})
			.attr("y", function (d) {
				return yScale(d.number);
			})
			.on("mouseover", function(d){
				d3.select(this)
						.attr("fill", "orange")
				var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
				var yPosition = parseFloat(d3.select(this).attr("y")) + 15;

				d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px")
						.classed("hidden", false)
						.select("#value")
						.text(d.number)
			})
			.on("mouseout", function(){
				d3.select(this)
						.attr("fill", "black")
				d3.select("#tooltip").classed("hidden", true);
			})





	var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom")

	svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0, " + (h - padding) + ")")
			.call(xAxis);

	var yAxis = d3.svg.axis()
			.scale(yScale)
			.orient("left")
	svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.call(yAxis)


</script>
</body>
</html>